<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
      
        <title>Impress.js</title>
        <meta name="description" content="Webpage from Samaras Georgios,Hugo Diaz, Filippo Ferrario & Georgios Kokosioulis">
        <meta name="author" content="Hugo Diaz Ferreiro & Samaras Georgios & Filippo Ferrario & Georgios Kokosioulis">
        <meta name="viewport" content="width=device-width">
		
		<!-- colorSelector -->
		<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
		<script src="js/jquery-1.8.2.js"></script>
  		<script src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="js/colorpicker.js"></script>
		<script type="text/javascript" src="js/eye.js"></script>
		<script type="text/javascript" src="js/layout.js"></script>
		<script type="text/javascript" src="js/utils.js"></script>
		
		<link rel="stylesheet" href="css/jquery-ui.css" />
		<link rel="stylesheet" href="css/style.css">
	    
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
		
	
		

    </head>
	<body>
	<div id="menu-bar">
			<label id="nameWebPage" class="identifiers">name</label>
			<label id="logoWebPage" class="identifiers"><img src="images/Eye_Logo.jpg" alt="Logo"  height="30"></label>
			
			<div id="file-displayer">
		        <button id="file-menu">File</button>
		    </div>
		    <ul id="file-displayed">
		        <li><button onclick="">New</button></li>
		        <li><button onclick="">Open</button></li>
		        <li><button onclick="">Save</button></li>
		        <li><button onclick="">Save As</button></li>
		    </ul>
		    <div id="slide-displayer">
		        <button id="slide-menu">Slide</button>
		    </div>
		    <ul id="slide-displayed">
		        <li><button onclick="">Export as webpage</button></li>
		        <li><button onclick="">Zip presentation</button></li>
		    </ul>
		</div>
	<div id="tool-bar">
	<div id="tabs">
 		<ul id="list-tabs">
	        <li class="tab"><a href="#format">text</a></li>
	        <li class="tab"><a href="#adding">add</a></li>
   		</ul>
		<div id="format">
			
		    <input type="checkbox" id="check1" /><label id="bold-button" for="check1">N</label>
		    <input type="checkbox" id="check2" /><label id="italic-button" for="check2">N</label>
		    <input type="checkbox" id="check3" /><label id="underline-button" for="check3">N</label>
		    <input type="checkbox" id="check4" /><label id="cross-button" for="check4">N</label>
			<label for="spinner">Size:</label>
			
			<select name="size" id="sizeTypes">
			    <option value="8">8</option>
			    <option value="9">9</option>
			    <option value="10">10</option>
			    <option value="11">11</option>
			    <option value="12">12</option>
			    <option value="13">13</option>
			    <option value="14">14</option>
			    <option value="16">16</option>
			    <option value="18">18</option>
			    <option value="20">20</option>
			    <option value="25">25</option>
			    <option value="32">32</option>
			    <option value="48">48</option>
			    <option value="60">60</option>
			    <option value="72">72</option>
			</select>
			<select id="fontFamiliesTypes" name="font">
					<option value="Times New Roman">Times New Roman</option>
					<option value="Georgia">Georgia</option>
					<option value="Arial">Arial</option>
					<option value="Verdana">Verdana</option>
					<option value="Courier New">Courier New</option>
					<option value="Lucida Console">Lucida Console</option>
					<option value="Helvetica">Helvetica</option>
					<option value="Gill Sans">Gill Sans</option>
					<option value="Avantgarde">Avantgarde</option>
					<option value="Palatino">Palatino</option>
					<option value="Andale Mono">Andale Mono</option>
					<option value="Florence">Florence</option>
					<option value="Impact">Impact</option>
					<option value="fantasy">fantasy</option>
				</select>
				
				<button id="btnColorSelector" value="hide"></button>
				<button id="addList" onclick="">List </button>
				<button id="addTitle" onclick="">Title </button>
				<div class="colorSelectorHide" id="colorSelector"></div>
			
		</div>
		<div id="adding">
		    	<button class="addSlide" onclick="">+</br>Slide</p> </button>
				<button class="addText" onclick="">Text</p> </button>  
				<button onclick="">Image</p> </button>  
				<button onclick="">Video</p> </button>  
				<button class="button-rigth" onclick="">Overview</p> </button>  
				<button class="button-rigth" onclick="">Present</p> </button>  
		    
		</div>


	</div>
	</div>
	<div id="slide-bar">
		<div id="slide1">
			Slide1
			
		</div>
	</div>
	<div id="display-bar">
		
	</div>
	
	<script>
	/***********************For the colorSelector*****************************/		
			$('#colorSelector').ColorPicker({
				flat: 'true',
				onChange: function(hsb, hex, rgb, el) {
					returnRGB(rgb);
					var str = "";
					str += "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
					var cssObj = {
      					'background-color' : str
    				};
					$('#btnColorSelector').css(cssObj);
				},
				onSubmit: function(){
					$('#colorSelector').addClass("colorSelectorHide");
					$('#btnColorSelector').value = "hide";
				}
			});
			
			
			function returnRGB( rgb )
			{
			     /* rgb is the color selected */
			     console.log(rgb);
			}

			(function() {
				$('#btnColorSelector').click(function() {
					if(this.value === "hide") {
						this.value="show";
						$('#colorSelector').removeClass("colorSelectorHide");
					}
					else {
						this.value="hide";
						$('#colorSelector').addClass("colorSelectorHide");
					}
				});
			})();
		</script>
	<script>
		$(function() {
        $( "#file-menu" ).click(function() {
                    var menu = $( this ).parent().next().show().position({
                        my: "left top",
                        at: "left bottom",
                        of: this
                    });
                    $( document ).one( "click", function() {
                        menu.hide();
                    });
                    return false;
                })
                .parent()
                    .buttonset()
                    .next()
                        .hide()
                        .menu();
    });
    $(function() {
            $( "#slide-menu" ).click(function() {
                    var menu = $( this ).parent().next().show().position({
                        my: "left top",
                        at: "left bottom",
                        of: this
                    });
                    $( document ).one( "click", function() {
                        menu.hide();
                    });
                    return false;
                })
                .parent()
                    .buttonset()
                    .next()
                        .hide()
                        .menu();
    });

    $(function() {
        $( "#format" ).buttonset();
    });
    $(function() {
        $( "#tabs" ).tabs();
    });
    
    $(function(){
    	$("button").button();
    });
    $(function(){
    	$("#addList").button();
    });
    $(function(){
    	$( "#menu" ).menu();
    });

    
    </script>

	<!--	<div class="toolbar" style="height: 70px;background:white">
			<input type="checkbox" id="check1" /><label for="check1">B</label>
			<button onclick="">
				<p id="italic-button">
					N
				</p>
			</button>
			<button onclick="">
				<p id="underline-button">
					N
				</p>
			</button>
			<button onclick="">
				<p id="cross-button">
					N
				</p>
			</button>
		</div>-->

	</body>
</html>